<!-- 教师管理 -->
<template>
  <el-card>
    <el-row>
      <el-form ref="form" :model="searchDto" inline label-suffix=":">
        <el-form-item label="关键字" prop="keywords">
          <el-input
            v-model="searchDto.keywords"
            placeholder="请输入关键字"
            style="width: 250px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="search"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-s-open" type="primary" @click="clear"
            >重置</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-plus" type="primary" @click="addAppliance"
            >新增教师</el-button
          >
        </el-form-item>
      </el-form>
    </el-row>

    <page-table
      ref="recovery"
      :page-data="pageData"
      :loading="loading"
      :do-get-page-data="getPageData"
    >
      <el-table-column type="index" label="编号" width="80" align="center" />
      <el-table-column prop="name" label="教师姓名" align="center" />
      <el-table-column prop="certification" label="教师资质" align="center">
        <template slot-scope="scope">
          <a
            style="color: #409eff; cursor: pointer"
            @click="certificationHandle(scope.row)"
          >
            {{ setCredentialNum(scope.row.certification) }}
          </a>
        </template>
      </el-table-column>
      <el-table-column prop="credential" label="相关证书" align="center">
        <template slot-scope="scope">
          <a
            style="color: #409eff; cursor: pointer"
            @click="clickCredentialHandle(scope.row)"
          >
            {{ setCredentialNum(scope.row.credential) }}
          </a>
        </template>
      </el-table-column>
      <el-table-column prop="photos" label="教师照片" align="center">
        <template slot-scope="scope">
          <a
            style="color: #409eff; cursor: pointer"
            @click="clickTextHandle(scope.row)"
          >
            {{ setPhotoNum(scope.row.photos) }}
          </a>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="教师介绍" align="center" show-overflow-tooltip />
      <el-table-column prop="createTime" label="创建时间" align="center" />
      <el-table-column label="操作" align="center" width="300" fixed="right">
        <template slot-scope="scope">
          <el-tooltip content="编辑" placement="top">
            <el-button
              type="button"
              size="mini"
              icon="el-icon-edit"
              @click="editAppliance(scope.row)"
            >
            </el-button>
          </el-tooltip>
          <el-tooltip content="详情" placement="top">
            <el-button
              type="button"
              size="mini"
              icon="el-icon-search"
              @click="view(scope.row)"
            >
            </el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button
              type="button"
              size="mini"
              icon="el-icon-delete"
              @click="delAppliance(scope.row)"
            >
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </page-table>
    <el-dialog
      title="资质查看"
      :visible.sync="certificationVisible"
      width="50%"
      :center="true"
      :before-close="certificationHhandleClose"
    >
      <el-row type="flex" justify="center" class="row-bg">
        <el-col :span="12">
          <el-image
            v-for="url in certificationList"
            :key="url"
            style="max-width: 50%; height: 50%"
            :src="img + '/' + url"
          ></el-image>
        </el-col>
      </el-row>
    </el-dialog>
    <el-dialog
      title="证书查看"
      :visible.sync="credentialVisible"
      width="50%"
      :center="true"
      :before-close="credentiaLHhandleClose"
    >
      <el-row type="flex" justify="center" class="row-bg">
        <el-col :span="12">
          <el-image
            v-for="url in credentialList"
            :key="url"
            style="max-width: 50%; height: 50%"
            :src="img + '/' + url"
          ></el-image>
        </el-col>
      </el-row>
    </el-dialog>
    <el-dialog
      title="教师照片查看"
      :center="true"
      :visible.sync="photosVisible"
       width="50%"
      :before-close="photosHandleClose"
    >
      <el-row type="flex" justify="center" class="row-bg">
        <el-col :span="12">
          <el-image
            style="width: 150px; height: 150px"
            :src="img + '/' + photosList"
          ></el-image>
        </el-col>
      </el-row>
    </el-dialog>
  </el-card>
</template>
<script>
export default {
  
  name: "teacherList",
  data() {
    return {
      pageData: {},
      loading: false,
      credentialVisible: false,
      photosVisible: false,
      certificationVisible:false,
      photosList: null,
      credentialList: null,
      certificationList:null,
      img: window.api.image,
      searchDto: {
        pageIndex: null,
        pageSize: null,
        keywords: null,
        institutionId: null,
      },
    };
  },
  methods: {
    // 根据用户id查询儿童康复救助机构信息
    getInfo() {
      this.API.deleteRecoveryInstitutionById().then((res) => {
        this.searchDto.institutionId = res.data.id;
        this.getPageData();
      });
    },
    // 获取分页数据
    getPageData(val) {
      let tem = Object.assign(this.searchDto, val);
      console.log('tem:',tem);
      this.API.getRecoveryTeacherPageList(tem).then((res) => {
        this.pageData = res.data;
      });
    },
    // 查询
    search() {
      this.getPageData({ pageIndex: 1 });
    },

    //清空
    clear() {
      this.$refs.form.resetFields();
      this.getPageData();
    },
    //   编辑
    editAppliance({ id }) {
      this.$router.push({ name: "teacherEdit", query: { id } });
    },

    // 新增
    addAppliance() {
      this.$router.push({ name: "teacherAdd" });
    },
    //   详情
    view({ id }) {
      this.$router.push({ name: "teacherDetail", query: { id } });
    },

    // 删除
    delAppliance({ id }) {
      this.$confirm("确认删除此数据?", "提示", { type: "warning" }).then(() => {
        this.API.deleteRecoveryTeacherById({ id })
          .then((ret) => {
            this.success("删除成功!");
            this.getPageData();
          })
          .catch((err) => {
            this.warning(err);
          });
      });
    },

    //照片
    clickTextHandle(row) {
      this.photosVisible = true;
      this.photosList = row.photos;
    },
    photosHandleClose() {
      this.photosVisible = false;
    },

    // 证书
    clickCredentialHandle(row) {
      this.credentialVisible = true;
      this.credentialList = row.credential.split(",");
    },
    credentiaLHhandleClose() {
      this.credentialVisible = false;
    },

    // 资质
    certificationHhandleClose(){
      this.certificationVisible = false;
    },
    certificationHandle(row){
      this.certificationVisible = true;
      this.certificationList = row.certification.split(",");
    },

    setCredentialNum(num) {
      return num.indexOf(",") ? num.split(",").length : 1;
    },
    setPhotoNum(num) {
      // console.log('num:',num);
      return num.indexOf(",") ? num.split(",").length : 1;
    },
  },
  mounted() {
    this.getInfo();
  },
};
</script>
<style scoped lang="scss"></style>
  